<template>
  <div ref="imageWrapper" class="IllegalSigning">
    <tabsBox :list="tabsList" @click="tabsClickFun"></tabsBox> 
    <div class="searchBox">
      <a-row :gutter="2">
        <a-col :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
          <div class="searchBoxItem">
            <span>项目单位：</span>
            <div class="searchBoxItemCon">
              <projectUnitTree :value="params.projectUnit" ></projectUnitTree>
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
          <div class="searchBoxItem">
            <span>数据范围：</span>
            <div class="searchBoxItemCon">
              <a-select v-model="params.value" style="width: 100%;" placeholder="请选择数据范围">
                <a-select-option :value="1">本单位数据</a-select-option>
                <a-select-option :value="2">本单位及以下数据</a-select-option>
              </a-select>
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
          <div class="searchBoxItem">
            <span>指标筛选：</span>
            <div class="searchBoxItemCon">
              <a-button type="primary" @click="indicatorScreeningVisible = true;getSjModelFieldConfig()">点击查看</a-button>
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :lg="24" :xl="24" :xxl="6">
          <div style="float: right; overflow: hidden" class="searchBtnBox table-page-search-submitButtons">
            <a-button type="primary" @click="onSearch" icon="search" class="yellow_search_btn">分析</a-button>
            <a-button @click="searchReset" icon="reload" class="clear_btn"
              style="margin-left: 12px">清除条件</a-button>
            <a-button
              type="danger"
              :loading="ydLoading"
              @click="handleToYD(false)"
              icon="arrow-right"
              style="margin-left: 12px"
              >转疑点</a-button
            >
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="tableBox">
      <a-table :columns="tableColumns" :data-source="tableData" bordered rowKey="No"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
        <span slot="tags" slot-scope="tags">
          <div class="documentNumber" @click="modelPopupVisible = true;modelPopupSelVal = 9">{{ tags }}</div>
        </span>
      </a-table>
    </div>

    <!-- 基本信息 弹窗 -->
    <a-modal
      :width="1000"
      title="基本信息"
      :visible="basicInformationVisible"
      :footer="false"
      @cancel="basicInformationVisible = false"
    >
      <div class="basicInformationItem" v-for="(item, index) in basicInformationData" :key="index">
        <div class="basicInformationItemHeader">
          <i class="basicInformationItemHeaderIcon"></i>
          <div class="basicInformationItemHeaderTxt">{{ item.title }}</div>
        </div>
        <div class="basicInformationItemContent">{{ item.content }}</div>
        <div class="basicInformationItemLine" v-if="index != (basicInformationData.length - 1)"></div>
      </div>
    </a-modal>

    <!-- 疑点规则 弹窗 -->
    <a-modal
      :width="800"
      title="疑点规则"
      :visible="doubtfulPointRulesVisible"
      :footer="false"
      @cancel="doubtfulPointRulesVisible = false"
    >
      <div class="doubtfulPointRulesItem" v-for="(item, index) in doubtfulPointRulesData" :key="index">
        {{ item }}
      </div>
    </a-modal>
    
    <!-- 数据完整性 弹窗 -->
    <a-modal
      :width="600"
      title="数据完整性"
      :visible="dataIntegrityVisible"
      :footer="false"
      @cancel="dataIntegrityVisible = false"
    >
      <div class="dataIntegrityItem" v-for="(item, index) in dataIntegrityData" :key="index">
        <div class="dataIntegrityItemL">
          <i class="dataIntegrityItemIcon" :class="{'dataIntegrityItemIcon_isUpload':item.status}"></i>
          <div class="dataIntegrityItemTxt">{{ item.name }}</div>
        </div>
        <div class="dataIntegrityItemBtn" v-if="item.status"
         @click="modelPopupVisible = true;modelPopupSelVal = index">查看</div>
      </div>
    </a-modal>

    <!-- 模型 弹窗 -->
    <a-modal
      :width="1550"
      :title="modelPopupData[modelPopupSelVal].title"
      :visible="modelPopupVisible"
      :footer="false"
      @cancel="modelPopupVisible = false"
    >
      <div class="modelPopupModal">
        <a-row class="modelPopupBox">
          <a-col class="modelPopupTitle" :span="24"
            v-for="(item, index) in modelPopupData[modelPopupSelVal].list1" :key="index">
            {{ item.title }}
          </a-col>
          <a-col class="modelPopupList" :span="item.span || 12"
            v-for="(item, index) in modelPopupData[modelPopupSelVal].list2" :key="index">
            <div class="modelPopupListTxt modelPopupListTxt1">{{ item.title }}</div>
            <div class="modelPopupListTxt modelPopupListTxt2">{{ item.value }}</div>
          </a-col>
        </a-row>
        <a-table :columns="modelPopupData[modelPopupSelVal].columns" :data-source="modelPopupData[modelPopupSelVal].data" bordered></a-table>
        <a-row class="modelPopupBox1" v-if="modelPopupData[modelPopupSelVal].list3 && modelPopupData[modelPopupSelVal].list3.length">
          <a-col class="modelPopupList" :span="item.span || 12"
            v-for="(item, index) in modelPopupData[modelPopupSelVal].list3" :key="index">
            <div class="modelPopupListTxt modelPopupListTxt1">{{ item.title }}:</div>
            <div class="modelPopupListTxt modelPopupListTxt2">{{ item.value || "无" }}</div>
          </a-col>
        </a-row>
      </div>
    </a-modal>

    <!-- 自定义阈值 指标筛选 弹窗 -->
    <a-modal
      :width="600"
      title="自定义阈值"
      :visible="indicatorScreeningVisible"
      @ok="save"
      @cancel="indicatorScreeningVisible = false"
    >
      <div class="indicatorScreeningItem">
        <div class="indicatorScreeningItemTxt">时间异常（一般）：</div>
        <div class="indicatorScreeningItemRight">
          <span class="indicatorScreeningItemRightTxt">大于</span>
          <a-input class="indicatorScreeningItemRightInput" v-model="indicatorScreeningData.time_anomaly_general" />
          <span class="indicatorScreeningItemRightTxt">天</span>
        </div>
      </div>
      <div class="indicatorScreeningItem">
        <div class="indicatorScreeningItemTxt">时间异常（中等）：</div>
        <div class="indicatorScreeningItemRight">
          <span class="indicatorScreeningItemRightTxt">大于</span>
          <a-input class="indicatorScreeningItemRightInput" v-model="indicatorScreeningData.time_anomaly_moderate" />
          <span class="indicatorScreeningItemRightTxt">天</span>
        </div>
      </div>
      <div class="indicatorScreeningItem">
        <div class="indicatorScreeningItemTxt">时间异常（偏高）：</div>
        <div class="indicatorScreeningItemRight">
          <span class="indicatorScreeningItemRightTxt">大于</span>
          <a-input class="indicatorScreeningItemRightInput" v-model="indicatorScreeningData.time_anomaly_high" />
          <span class="indicatorScreeningItemRightTxt">天</span>
        </div>
      </div>
      <div class="indicatorScreeningItem">
        <div class="indicatorScreeningItemTxt">金额异常（一般）：</div>
        <div class="indicatorScreeningItemRight">
          <span class="indicatorScreeningItemRightTxt">大于</span>
          <a-input class="indicatorScreeningItemRightInput" v-model="indicatorScreeningData.amount_anomaly_general" />
          <span class="indicatorScreeningItemRightTxt">万元</span>
        </div>
      </div>
      <div class="indicatorScreeningItem">
        <div class="indicatorScreeningItemTxt">金额异常（中等）：</div>
        <div class="indicatorScreeningItemRight">
          <span class="indicatorScreeningItemRightTxt">大于</span>
          <a-input class="indicatorScreeningItemRightInput" v-model="indicatorScreeningData.amount_anomaly_moderate" />
          <span class="indicatorScreeningItemRightTxt">万元</span>
        </div>
      </div>
      <div class="indicatorScreeningItem">
        <div class="indicatorScreeningItemTxt">金额异常（偏高）：</div>
        <div class="indicatorScreeningItemRight">
          <span class="indicatorScreeningItemRightTxt">大于</span>
          <a-input class="indicatorScreeningItemRightInput" v-model="indicatorScreeningData.amount_anomaly_high" />
          <span class="indicatorScreeningItemRightTxt">万元</span>
        </div>
      </div>
    </a-modal>

    <!-- 项目信息 弹窗 -->
    <projectInfoModal :visible="projectInfoVisible"
     @cancel="projectInfoVisible = false"></projectInfoModal>

    <!-- 转移点 -->
    <YDModel ref="YDModel" :router-data="$route.path" />
  </div>
</template>

<script>
import tabsBox from './components/tabsBox.vue';
import { numberOfExitsOpt, exitRatioOpt } from './js/echartsDataOpt.js'
import modelPopupData from './js/modelPopupData.js'
import echarts from '@/components/echarts.vue'
import { getAction, postAction, putAction } from '@/api/manage'
import YDModel from './components/YDModel'
import projectUnitTree from './components/projectUnitTree.vue'
import html2canvas from 'html2canvas'
import projectInfoModal from './components/projectInfoModal/index.vue'
export default {
  components: {
    tabsBox,
    echarts,
    YDModel,
    projectUnitTree,
    projectInfoModal,
  },
  data() {
    return {
      istrigger: false,
      ydLoading: false,
      params: {
        value: 1,
      },
      tableData: [
        { name1: '废旧钢筋头', name3: '吨', name5: '17.91', name7: '51222.6',
          name8: '2023/4/9', name9: '2023/4/14',
          name10: '2023/4/14', tags: '银收0002',
          name12: '河北中开', name13: '肖建'
        },
        { name1: '水泥罐', name3: '吨', name5: '32.2', name7: '77924',
          name8: '2023/6/14', name9: '2023/6/14',
          name10: '2023/6/23', tags: '银收0005',
          name12: '河北中开', name13: '赵萌'
        },
        { name1: '废旧钢筋头', name3: '吨', name5: '19.91', name7: '48182.2',
          name8: '2023/5/29', name9: '2023/5/31',
          name10: '2023/5/31', tags: '银收0006',
          name12: '河北中开', name13: '河南庞建再生资源回收有限公司'
        },
        { name1: '废旧钢筋头', name3: '吨', name5: '35.73', name7: '89325',
          name8: '2023/6/27', name9: '2023/7/6',
          name10: '2023/7/12', tags: '银收0015',
          name12: '中玺拍卖', name13: '河南庞建再生资源回收有限公司'
        },
        { name1: '废旧钢模板', name3: '吨', name5: '208', name7: '499200',
          name8: '2023/12/23', name9: '2024/1/23',
          name10: '2024/1/31', tags: '银收0007',
          name12: '中玺拍卖', name13: '河南庞建再生资源回收有限公司'
        },
        { name1: '废旧钢筋头', name3: '吨', name5: '50.72', name7: '131872',
          name8: '2024/1/15', name9: '2024/1/17',
          name10: '2024/1/31', tags: '银收0008',
          name12: '中玺拍卖', name13: '河南庞建再生资源回收有限公司'
        },
      ],
      selectedRowKeys: [],
      tableSelValue: 1,
      tableColumns: [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          width: 65,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        { title: "处置物资名称", dataIndex: "name1", key: "name1" },
        { title: "处置物资规格", dataIndex: "name2", key: "name2" },
        { title: "单位", dataIndex: "name3", key: "name3" },
        { title: "处置数量", dataIndex: "name5", key: "name5" },
        { title: "处置单价(元)", dataIndex: "name6", key: "name6" },
        { title: "处置金额(元)", dataIndex: "name7", key: "name7" },
        { title: "处置时间", dataIndex: "name8", key: "name8" },
        { title: "入账时间", dataIndex: "name9", key: "name9" },
        { title: "凭证日期", dataIndex: "name10", key: "name10" },
        { title: "凭证编号", dataIndex: "tags", key: "tags", scopedSlots: { customRender: 'tags' }, },
        { title: "凭证详情信息", dataIndex: "name11", key: "name11" },
        { title: "处置方式", dataIndex: "name12", key: "name12" },
        { title: "处置平台", dataIndex: "name13", key: "name13" },
        { title: "收购单位", dataIndex: "name14", key: "name14" },
      ],
      echartsList: [
        {
          title: '供应商物资疑点数量',
          icon: require('../../assets/new_modal/1.png'),
          echartsOpt: {
            id: 'numberOfExitsECharts1',
            options: null,
          },
        },
        {
          title: '物资招标不规范疑点比例',
          icon: require('../../assets/new_modal/3.png'),
          echartsOpt: {
            id: 'numberOfExitsECharts2',
            options: null
          },
        },
      ],
      tabsList: [
        { title: '物资处理类“小金库”', img: require('../../assets/new_modal/10.png') },
        { title: '模型说明', img: require('../../assets/new_modal/5.png') },
        { title: '疑点规则', img: require('../../assets/new_modal/4.png') },
        { title: '数据完整性', img: require('../../assets/new_modal/2.png') },
        { title: '项目信息', img: require('../../assets/new_modal/17.png') },
      ],
      basicInformationVisible: false,
      basicInformationData: [
        { value: 'mxdy', title: '模型定义' },
        { value: 'sjal', title: '实际案例' },
        { value: 'sjwt', title: '审计问题' },
        { value: 'wtdx', title: '问题定性' },
      ],
      doubtfulPointRulesVisible: false,
      doubtfulPointRulesData: [],
      dataIntegrityVisible: false,
      dataIntegrityData: [],
      modelPopupVisible: false,
      modelPopupSelVal: 0,
      modelPopupData,
      indicatorScreeningVisible: false,
      indicatorScreeningParams: {},
      indicatorScreeningData: {},
      projectInfoVisible: false,
      url: {
        queryTemplateData: '/sjmx2/modelTemplateCollectConfig/queryTemplateData',
        editIndicator: '/sjmx/sjModelFieldConfig/edit',
        getModelTemplateConfig: '/sjmx2/modelTemplateConfig/queryById',
        getSjModelFieldConfig: '/sjmx/sjModelFieldConfig/queryModelField',
      },
    }
  },
  mounted() {
    this.getModelTemplateConfig();
  },
  methods: {
    queryTemplateData() {
      getAction(this.url.queryTemplateData, {id: 'wzcllxjk'}).then((res)=>{
        if(res.code == 200) {
          this.dataIntegrityData = res.result
        }
      })
    },
    save() {
      let projectJson =JSON.stringify(this.indicatorScreeningData)
      this.editIndicator(projectJson);
      this.visible = false
    },
    // 保存已经修改的projectJson(子组件返回json串)
    editIndicator(projectJson) {
      let queryParam = {
        id: this.indicatorScreeningParams.id,
        modelId: "wzcllxjk",
        projectJson,
      };
      putAction(this.url.editIndicator, queryParam).then((res) => {
        this.$message.success('保存成功');
        this.indicatorScreeningVisible = false;
      })
    },
    getSjModelFieldConfig() {
      getAction(this.url.getSjModelFieldConfig, {modelId: 'wzcllxjk'}).then((res)=>{
        this.indicatorScreeningData = JSON.parse(res.result.projectJson);
        this.indicatorScreeningParams = res.result;
      })
    },
    getModelTemplateConfig() {
      getAction(this.url.getModelTemplateConfig, {id: 'wzcllxjk'}).then((res)=>{
        let jbxx = JSON.parse(res.result.jbxx);
        for(let key in jbxx) {
          for(let i=0;i<this.basicInformationData.length;i++) {
            let item = this.basicInformationData[i];
            if(item.value == key) {
              this.$set(this.basicInformationData[i], 'content', jbxx[key]);
            }
          }
        }
        this.doubtfulPointRulesData = [res.result.ydgz]
      })
    },
    tabsClickFun(e) {
      if(e == 0) {
      }else if(e == 1) {
        this.basicInformationVisible = true;
      }else if(e == 2) {
        this.doubtfulPointRulesVisible = true;
      }else if(e == 3) {
        this.dataIntegrityVisible = true;
        this.queryTemplateData();
      }else if(e == 4) {
        this.projectInfoVisible = true;
      }
    },
    onSearch() {

    },
    searchReset() {

    },
    handleToYD() {
      this.ydLoading = true
      let time = '[劳务分包补充合同占比高]'
      let ydnr = '此项目存在【劳务分包补充合同占比高】类似疑点信息。'
      let gzzd = undefined
      html2canvas(this.$refs.imageWrapper).then((canvas) => {
        let dataURL = canvas.toDataURL('image/png')
        console.log('父组件调用完了')
        // this.$refs.YDModel.show()
        this.$refs.YDModel.show({}, dataURL, ydnr, time, gzzd)
        this.ydLoading = false
      })
    },
    onSelectChange(e) {
      this.selectedRowKeys = e;
    }
  }
}
</script>

<style lang="less" scoped>
.IllegalSigning {
  .searchBox {
    padding: 0 25px;
    margin-top: 15px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 50px;
  }
  .searchBoxItem {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    span {
      text-align: right;
      width: 80px;
    }
    .searchBoxItemCon {
      flex: 1;
    }
  }
  .searchBtnBox {
    padding: 10px 0;
    display: flex;
    align-items: center;
  }
  .tableBox {
    padding: 25px;
    margin-top: 15px;
    border-radius: 40px;
    background-color: #ffffff;
  }
  .eChartsBox {
    margin-top: 15px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(2, 1fr);
  }
  .eChartsItem {
    padding: 25px;
    border-radius: 30px;
    background-color: #ffffff;
  }
  .eChartsItemHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .eChartsItemHeaderIcon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .eChartsItemHeaderTxt {
    margin-left: 10px;
    font-size: 20px;
    color: #3154A4;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: normal;
  }
  .eChartsItemEChart {
    height: 288px;
  }
}
.basicInformationItem {
  .basicInformationItemHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .basicInformationItemHeaderIcon {
    display: inline-block;
    width: 6px;
    height: 18px;
    background-color: rgba(49, 84, 164, 1);
    margin-right: 10px;
  }
  .basicInformationItemHeaderTxt {
    font-size: 18px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    color: #333333;
    line-height: normal;
  }
  .basicInformationItemContent {
    margin-top: 15px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    color: #333333;
    font-size: 14px;
    text-align: left;
    line-height: 25px;
  }
  .basicInformationItemLine {
    width: 100%;
    height: 1px;
    background-color: #3154A4;
    margin: 15px 0;
  }
}
.doubtfulPointRulesItem {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  text-align: left;
  letter-spacing: normal;
  color: #333333;
  text-indent:2em;
  line-height: 25px;
}
.dataIntegrityItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
  .dataIntegrityItemL {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .dataIntegrityItemIcon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-image: url('../../assets/new_modal/u1146.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .dataIntegrityItemIcon_isUpload {
    background-image: url('../../assets/new_modal/u11.svg');
  }
  .dataIntegrityItemTxt {
    font-size: 14px;
    text-align: left;
    line-height: normal;
    letter-spacing: normal;
    color: #333333;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .dataIntegrityItemBtn {
    cursor: pointer;
    color: #3154A4;
    font-size: 14px;
    text-align: left;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: normal;
  }
}
.indicatorScreeningItem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0;
  }
  .indicatorScreeningItemTxt {
    width: 150px;
    text-align: right;
  }
  .indicatorScreeningItemRight {
    width: calc(100% - 150px);
  }
  .indicatorScreeningItemRightTxt {
    display: inline-block;
    width: 40px;
    text-align: center;
  }
  .indicatorScreeningItemRightInput {
    width: 30%;
  }
}
.modelPopupModal {
  .modelPopupBox {
    border-top: 1px solid #dadada;
    border-right: 1px solid #dadada;
    .modelPopupTitle {
      padding: 5px 0;
      text-align: center;
      border: 1px solid #dadada;
      border-top-width: 0;
      border-right-width: 0;
      background-color: #F2F2F2;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
    }
    .modelPopupList {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #dadada;
      border-top-width: 0;
      border-right-width: 0;
      &:last-child {
        border-bottom-width: 0;
      }
      .modelPopupListTxt {
        width: 50%;
        padding: 5px;
      }
      .modelPopupListTxt1 {
        background-color: #F2F2F2;
      }
      .modelPopupListTxt2 {
        background-color: #ffffff;
      }
    }
  }
  .modelPopupBox1 {
    border-right: 1px solid #dadada;
    .modelPopupList {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #dadada;
      border-top-width: 0;
      border-right-width: 0;
      .modelPopupListTxt {
        width: 50%;
        padding: 5px;
      }
      .modelPopupListTxt1 {
        background-color: #F2F2F2;
      }
      .modelPopupListTxt2 {
        background-color: #ffffff;
      }
    }
  }
  .ant-table-thead > tr > th .ant-table-header-column {
    white-space: nowrap;
  }
}
.documentNumber {
  cursor: pointer;
  color: #3154A4;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: normal;
  text-decoration: underline;
}
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: #3154a4;
  border-color: #3154a4;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
  background-color: #3154a4;
}
</style>